---
title: Astroを自動CLIでインストール
description: npm、pnpm、またはYarnを使って、create-astro CLIツールによりAstroをインストールする方法です。
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'


Astroをインストールする準備はできましたか？このガイドにしたがって`create astro`CLIを使用し、開始します。

:::note[Astroの手動インストールをご希望ですか？]
代わりに、[ステップバイステップのマニュアルインストールガイド](/ja/install/manual/)をお読みください。
:::

#### 前提条件

- **Node.js** - `v18.14.1` またはそれ以上。
- **テキストエディタ** - [VS Code](https://code.visualstudio.com/)と[公式Astro拡張機能](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)を推奨します。
- **ターミナル** - Astroは、コマンドラインインターフェイス（CLI）からアクセスします。

#### インストール

`create astro` は、新しいAstroプロジェクトをゼロから始めるもっとも速い方法です。新しいAstroプロジェクトをセットアップするためのすべてのステップを案内してくれます。いくつかの異なるスターターテンプレートから選んだり、 `--template` 引数を使用して独自のテンプレートを使用できます。

:::tip[オンラインプレビュー]
ブラウザでAstroを試したいですか？[Astro.new](https://astro.new/)では、スターターテンプレートを利用し、ブラウザから離れることなく、新しいAstroプロジェクトを立ち上げられます。
:::

## 1. セットアップウィザードを実行する

ターミナルで以下のコマンドを実行すると、便利なインストールウィザードが起動します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # npmで新しいプロジェクトを作成する
  npm create astro@latest
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # pnpmで新しいプロジェクトを作成する
  pnpm create astro@latest
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # yarnで新しいプロジェクトを作成する
  yarn create astro
  ```
  </Fragment>
</PackageManagerTabs>

`create astro`はどのディレクトリでも実行でき、始める前にプロジェクト用の新しい空のディレクトリを作成する必要はありません。新しいプロジェクト用の空のディレクトリがまだなければ、ウィザードが自動的に作成します。

うまくいくと、「Liftoff confirmed. Explore your project!」というメッセージの後に、いくつかの推奨する「Next steps」が表示されるはずです。新しいプロジェクトディレクトリに`cd`で移動し、Astroの使用を開始します。

もしCLIウィザードで`npm install`のステップをスキップした場合は、続行する前に依存関係をインストールしてください。

## 2. Astroをスタートする ✨

Astroには、プロジェクト開発に必要なものをすべて備えた開発サーバーが内蔵されています。`astro dev`コマンドを実行すると、ローカルの開発サーバーが起動し、新しいウェブサイトが実際に動作しているところを初めて見られるようになります。

すべてのスターターテンプレートには、あなたに代わって`astro dev`を実行するスクリプトがあらかじめ設定されています。お好みのパッケージマネージャーでこのコマンドを実行し、Astro開発サーバを起動します。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  npm run dev
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  pnpm run dev
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  yarn run dev
  ```
  </Fragment>
</PackageManagerTabs>

うまくいけば、Astroは[http://localhost:4321](http://localhost:4321)でプロジェクトの開発サーバーを起動します！

Astroは `src/` ディレクトリのファイル変更を自動検出するので、開発中に変更を加えてもサーバーを再起動する必要はありません。

{/* TODO: configuration-referenceが更新されたら、以下のリンク先を#dev-toolbar-optionsに変更する */}
ブラウザでサイトを表示すると、[AstroのDev Toolbar](/ja/reference/configuration-reference/)を利用できます。開発中に、[アイランド](/ja/concepts/islands/)を検査したり、アクセシビリティの問題を見つけたりするのに役立ちます。

ブラウザでプロジェクトを開けない場合は、`dev`コマンドを実行したターミナルに戻って、エラーが発生したか、またはプロジェクトが上記のリンク先とは異なるURLで提供されていないか確認してください。

## スターターテンプレート

また、`create astro`コマンドに`--template`引数を渡すことで、[公式サンプル](https://github.com/withastro/astro/tree/main/examples)や任意のGitHubリポジトリの`main`ブランチをベースにした新しいastroプロジェクトを開始できます。

<PackageManagerTabs>
  <Fragment slot="npm">
  ```shell
  # 公式サンプルで新しいプロジェクトを作成する
  npm create astro@latest -- --template <example-name>

  # GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
  npm create astro@latest -- --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="pnpm">
  ```shell
  # 公式サンプルで新しいプロジェクトを作成する
  pnpm create astro@latest --template <example-name>
  
  # GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
  pnpm create astro@latest --template <github-username>/<github-repo>
  ```
  </Fragment>
  <Fragment slot="yarn">
  ```shell
  # 公式サンプルで新しいプロジェクトを作成する
  yarn create astro --template <example-name>
  
  # GitHubリポジトリのmainブランチを元に新しいプロジェクトを作成する
  yarn create astro --template <github-username>/<github-repo>
  ```
  </Fragment>
</PackageManagerTabs>

デフォルトでは、このコマンドはテンプレートリポジトリの`main`ブランチを使用します。別のブランチを使用するには、`--template`引数の一部として`<github-username>/<github-repo>#<branch>`のように渡します。

[テーマとスターターのショーケース](https://astro.build/themes/)では、ブログ、ポートフォリオ、ドキュメント、ランディングページなどのテーマを閲覧できます！また、[GitHubで検索](https://github.com/search?o=desc&q=astro+starter&s=stars&type=Repositories)すると、さらに多くのスタータープロジェクトが見つかります。

## 次のステップ

成功です！これでAstroを使った開発をはじめる準備ができました！🥳

ここでは、次に調べることをおすすめするいくつかのトピックを紹介します。どのような順番で読んでもかまいません。また、このドキュメントを少し離れて、新しいAstroプロジェクトのコードベースで遊びながら、問題にぶつかったり、質問があったりしたときに、ドキュメントに戻ってくることもできます。

📚 **フレームワークを追加**：[インテグレーションガイド](/ja/guides/integrations-guide/)で、`npx astro add`を使用してReact、Svelte、Tailwindなどをサポートし、Astroを拡張する方法を学びます。

📚 **サイトをデプロイ**：[デプロイガイド](/ja/guides/deploy/)で、Astroプロジェクトをビルドしてウェブにデプロイする方法を学びましょう。

📚 **コードベースを理解**：Astroのディレクトリ構造については、[ディレクトリ構造ガイド](/ja/basics/project-structure/)で詳しく説明します。
